<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/layui/layui.js"></script>
    <style>
        body {
            background: url(images/loginbg.png) 0% 0% / cover no-repeat;
        }
        .login-body {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        .login-body .login-main {
            width: 428px;
        }

        .login-body .login-main .login-top {
            height: 117px;
            background-color: #148be4;
            border-radius: 12px 12px 0 0;
            font-family: SourceHanSansCN-Regular;
            font-size: 30px;
            font-weight: 400;
            font-stretch: normal;
            letter-spacing: 0;
            color: #fff;
            line-height: 117px;
            text-align: center;
            overflow: hidden;
        }

        .layui-form {
            width: 428px;
            background: #fff;
            border-radius: 0 0 12px 12px;
            padding-bottom: 53px;
        }

        .layui-form .center {
            width: 288px;
            margin: 0 auto;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .layui-form .center #msg {
            width: 288px;
            height: 35px;
            color:  red;
        }

        .layui-form .center .item {
            width: 288px;
            height: 35px;
            border-bottom: 1px solid #dae1e6;
            margin-bottom: 35px;
        }

        .layui-form .center .item input {
            display: inline-block;
            width: 227px;
            height: 22px;
            font-size: 14px;
            border: 0;
        }

        .layui-form .center .item .icon {
            display: inline-block;
            width: 33px;
            height: 22px;
        }

        .layui-form .center .item .icon-2 {
            background: url(images/icon-login.png) no-repeat -54px 0;
        }

        .layui-form .center .item .icon-3 {
            background: url(images/icon-login.png) no-repeat -106px 0;
        }

        .layui-form .center .login-btn {
            width: 288px;
            height: 40px;
            background-color: #1E9FFF;
            border-radius: 16px;
            margin: 24px auto 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 14px;
            letter-spacing: 0;
            cursor: pointer;
            border: none;
        }
    </style>
</head>
<body>
<div class="login-body">
    <div class="login-main">
        <div class="login-top">
            后台登录
        </div>
        <form class="layui-form" action="index">
            <div class="center">
                <div id="msg"></div>
                <div class="item">
                    <span class="icon icon-2"></span>
                    <input type="text" name="username" lay-verify="required" placeholder="请输入登录账号" maxlength="24">
                </div>
                <div class="item">
                    <span class="icon icon-3"></span>
                    <input type="password" name="userpwd" lay-verify="required" placeholder="请输入密码" maxlength="20"
                </div>
                <div class="layui-form-item">
                    <button class="login-btn" lay-submit="" lay-filter="login">立即登录</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['layer', 'form'], function(){
        var layer = layui.layer
            ,form = layui.form,
        $ = layui.$;

        form.on('submit(login)', function(data){
            $.ajax({
                url:"login",
                type:"post",
                data:data.field,
                dataType:"json",
                success:function(data) {
                    if (data.code==0) {
                        location.replace("index");
                    } else {
                        $("#msg").hide().show('fast').html(data.msg);
                    }
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>
</body>
</html>
